---
import Layout from "../layouts/Layout.astro";
import PageHeading from "../components/page-heading.astro";
---

<Layout>
  <PageHeading>
    <th:block slot="title">友情链接</th:block>
  </PageHeading>
  <div class="post-page">
    <div class="post animated fadeInDown">
      <div class="flex flex-col gap-4">
        <th:block th:each="group : ${groups}">
          <h2
            class="mt-2 text-lg font-medium"
            th:text="${group.spec.displayName}"
          >
          </h2>
          <div
            class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
          >
            <a th:each="link : ${group.links}" href="#" target="_blank">
              <div
                class="relative flex items-center space-x-3 rounded border border-gray-300 bg-white px-5 py-4 shadow-sm hover:border-gray-400 hover:shadow"
              >
                <div class="flex-shrink-0">
                  <img
                    class="h-12 w-12 rounded-full"
                    th:src="${link.spec.logo}"
                  />
                </div>
                <div class="min-w-0 flex-1">
                  <div>
                    <p
                      class="truncate text-sm font-medium text-gray-900"
                      th:text="${link.spec.displayName}"
                    >
                    </p>
                    <p
                      class="truncate text-sm text-gray-500"
                      th:text="${link.spec.description}"
                    >
                    </p>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </th:block>
      </div>
    </div>
  </div>
</Layout>
